<!-- 数据大图--近视率分布图 -->
<template>
  <div class="datapage">
    <div class="header">
      <h1>浙江省近视率分布图</h1>
    </div>
    <div class="container clearfix">
      <div class="left pull-left">
        <div class="chart-module">
          <h3 class="chart-title">筛查概况</h3>
          <div class="chart-main">
            <div id="screenmain" style="height: 150px;width: 100%;"></div>
          </div>
        </div>
        <div class="chart-module">
          <h3 class="chart-title">近视人数</h3>
          <div class="chart-main myopia-num">
            <div class="myopia-num-item">1</div>
            <div class="myopia-num-item">2</div>
            <div class="myopia-num-item">3</div>
            <div class="myopia-num-item">4</div>
          </div>
        </div>
        <div class="chart-module">
          <h3 class="chart-title">近视情况</h3>
          <div class="chart-main myopia-rate">
            <div class="myopia-rate-part">
              <div class="part-name">小学</div>
              <div class="part-progress">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="70"></el-progress>
              </div>
            </div>
            <div class="myopia-rate-part">
              <div class="part-name">初中</div>
              <div class="part-progress">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="70"></el-progress>
              </div>
            </div>
            <div class="myopia-rate-part">
              <div class="part-name">高中</div>
              <div class="part-progress">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="70"></el-progress>
              </div>
            </div>
            <div class="myopia-rate-part">
              <div class="part-name">职高</div>
              <div class="part-progress">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="70"></el-progress>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-module">
          <h3 class="chart-title">男女生近视比例-初中</h3>
          <div class="chart-main myopia-scale">
            <div class="chart-progress">
            	<el-progress type="circle" :show-text="false" :percentage="71.63" :width="130" :stroke-width="20" :color="color1"></el-progress>
            	<div class="circleCenter">
            		<div>71.63%</div>
            	  <div>男生</div>
            	</div>
            </div>
            <div class="chart-progress">
            	<el-progress type="circle" :show-text="false" :percentage="79.79" :width="130" :stroke-width="20" :color="color2"></el-progress>
            	<div class="circleCenter">
            		<div>79.79%</div>
            	  <div>女生</div>
            	</div>
            </div>
          </div>
        </div>
      </div><!-- /.left -->

      <div class="center pull-left">
        <div id="mapdata" style="height: 662px;width: 100%;margin-bottom: 15px;border: solid 1px #5c7dc7;box-shadow: 0px 0px 5px #5c7dc7 inset;"></div>

        <div class="chart-module">
          <h3 class="chart-title">近视率-初中</h3>
          <div class="chart-main" style="display: flex;justify-content: space-around;color: #fff;padding: 10px;">
            <div class="rate-item">
              <p>73.99%</p>
              <p>杭州市</p>
            </div>
            <div class="rate-item">
              <p>73.99%</p>
              <p>杭州市</p>
            </div>
            <div class="rate-item">
              <p>73.99%</p>
              <p>杭州市</p>
            </div>
            <div class="rate-item">
              <p>73.99%</p>
              <p>杭州市</p>
            </div>
            <div class="rate-item">
              <p>73.99%</p>
              <p>杭州市</p>
            </div>
            <div class="rate-item">
              <p>73.99%</p>
              <p>杭州市</p>
            </div>
          </div>
        </div>
      </div><!-- /.center -->

      <div class="right pull-right">
        <div class="chart-module">
          <h3 class="chart-title">近视等级分布</h3>
          <div class="chart-main">
            <div id="rankmain" style="height: 150px;width: 100%;"></div>
          </div>
        </div>
        <div class="chart-module">
          <h3 class="chart-title">近视率变化趋势</h3>
          <div class="chart-main">
            <div id="trendmain" style="height: 150px;width: 100%;"></div>
          </div>
        </div>
        <div class="chart-module">
          <h3 class="chart-title">近视矫正情况-初中</h3>
          <div class="chart-main">
            <div id="correctmain" style="height: 150px;width: 100%;"></div>
          </div>
        </div>
        <div class="chart-module">
          <h3 class="chart-title">近视率随年龄增长趋势</h3>
          <div class="chart-main">
            <div id="agetrendmain" style="height: 150px;width: 100%;"></div>
          </div>
        </div>
      </div><!-- /.right -->
    </div><!-- /.container -->
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import zheJiangJson from '@/const/zhejiang.json'

  import {
    getMyopia,
    getCheckLight,
    getEarlyWarning,
    getHoldPen
  } from '@/api/pvm/prevention/datacenter'

  var echarts = require('echarts');

  export default {
    data() {
      return {
        MyopiaData: '',
        ckLightData: '',
        color1: '#67adf6',
        color2: '#d272e3'
      }
    },
    created() {
      this.$nextTick(() => {
        this.screenChart()
        this.showChart()
        this.rankmainShow()
        this.trendmainShow()
        this.correctmainShow()
        this.agetrendmainShow()
      })
    },
    methods: {
      screenChart() {
        let myChart = echarts.init(document.getElementById('screenmain'))
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{c}"
          },
          series: [{
            name: '筛查概况',
            type: 'funnel',
            left: '10%',
            top: 10,
            //x2: 80,
            bottom: 10,
            width: '80%',
            min: 0,
            max: 2336832,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 10,
            label: {
              show: true,
              position: 'inside',
              formatter: function(params){
                return params.name + '\n' + params.value
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            data: [
              {value: 2336832,name: '应筛查人数'},
              {value: 2186255,name: '视光和屈光已筛查人数'},
              {value: 2154296,name: '有效筛查'}
            ]
          }],

        };
        myChart.setOption(option);
      },
      showChart() {
        let myChart = echarts.init(document.getElementById('mapdata'))
        let myData = [
          {name: '计算',value: [119.403038, 30.373347, 330]},
          {name: '功能',value: [119.12351, 29.236737, 210]},
          {name: '河南',value: [121.108409, 28.139011, 430]},
        ]
        let data = []
        echarts.registerMap('zhejiang', zheJiangJson);
        let option = {
          geo: {
            map: 'zhejiang',
            itemStyle: { // 定义样式
              normal: { // 普通状态下的样式
                areaColor: '#5588be',
                borderColor: '#0073EB'
              },
              emphasis: { // 高亮状态下的样式
                areaColor: 'green'
              }
            }
          },
          backgroundColor: '#29406b',
          visualMap: {
            type: 'piecewise',
            align: 'left',
            left: 'right',
            pieces: [
              {min: 451,color: '#800080'},
              {min: 351,max: 450,color: 'red'},
              {min: 251,max: 350,color: 'blue'},
              {max: 250,color: 'green'}
            ],
            textStyle: {
              color: '#fff'
            }
          },
          series: [{
            name: '销量', // series名称
            type: 'scatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            data: myData
          }]
        };
        myChart.setOption(option);
      },
      rankmainShow(){
        let myChart = echarts.init(document.getElementById('rankmain'))
        let option = {
          color: '#5470c6',
          grid: {
            width: '80%',
            left: '20%',
            top: '20',
            bottom: '30'
          },
          label: {
            show: true,
            position: 'top'
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            data: ['轻度近视', '中度近视', '高度近视']
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          series: [{
            data: [626149, 394048, 95815],
            type: 'bar'
          }]
        }
        myChart.setOption(option);
      },
      trendmainShow(){
        let myChart = echarts.init(document.getElementById('trendmain'))
        let option = {
        	legend: {
        			data: ['全部学生', '男生', '女生'],
              textStyle: {
                color: '#fff'
              }
        	},
          grid: {
            width: '80%',
            left: '20%',
            top: '40',
            bottom: '30'
          },
        	tooltip: {
        	        trigger: 'axis',

        	    },
            xAxis: {
                type: 'category',
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                data: ['2020-06','2020-09']
            },
            yAxis: {
        				type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
        				axisLabel: {
        					show: true,
                  left: '30',
        					interval: 'auto',
        					formatter: '{value}%'
        				},
        				min: 33,
        				show: true
            },
            series: [
        			{
        				name: '全部学生',
                data: [80,60],
                type: 'line',
                smooth: true
        			},
        			{
        				name: '男生',
        			  data: [78,58],
        			  type: 'line',
        			  smooth: true
        			},
        			{
        				name: '女生',
        			  data: [76,56],
        			  type: 'line',
        			  smooth: true
        			}
        		]
        };
        myChart.setOption(option);
      },
      correctmainShow(){
        let myChart = echarts.init(document.getElementById('correctmain'))
        let option = {
            color: ['#ee6666','#fac858','#3ba272'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '矫正情况',
                    type: 'pie',
                    radius: ['40%', '50%'],
                    labelLine: {
                        length: 10,
                    },
                    label: {
                        formatter: '{b} \n {d}% \n  {c}人 ',
                    },
                    data: [
                        {value: 1048, name: '未矫正'},
                        {value: 335, name: '矫正不足'},
                        {value: 310, name: '已矫正'}
                    ]
                }
            ]
        }
        myChart.setOption(option);
      },
      agetrendmainShow(){
        let myChart = echarts.init(document.getElementById('agetrendmain'))

        let option = {
            darkMode: true,
            color: ['#5470c6'],
            grid: {
              width: '80%',
              left: '20%',
              top: '20',
              bottom: '30'
            },

            xAxis: {
                type: 'category',
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                data: ['7', '8', '9', '10', '11', '12', '13','14','15','16','17','18','19','20','21','22','23']
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        }
        myChart.setOption(option);
      }

    }
  }
</script>

<style lang="scss" scoped>
  .datapage {
    width: 100%;
    background-color: #29406b;

    .header {
      width: 100%;
      text-align: center;
      color: #fff;
    }

    .container {
      width: 100%;
      display: flex;
      justify-content: space-around;

      .left {
        flex: 0 1 24%;
      }

      .center {
        flex: 0 1 48%;
      }

      .right {
        flex: 0 1 24%;
      }

      .chart-module {
        background-color: #29406b;
        margin-bottom: 10px;
        border: solid 1px #5c7dc7;
        box-shadow: 0px 0px 5px #5c7dc7 inset;

        .chart-title {
          color: #fff;
          padding: 5px 15px;
          background-color: #073642;
        }

        .chart-main {
          padding: 0px 10px;
        }
      }
    }

    .myopia-num {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;

      .myopia-num-item {
        flex: 0 1 25px;
        text-align: center;
        line-height: 45px;
        background-color: #0073EB;
        color: #fff;
        margin-right: 5px;
      }
    }

    .myopia-rate {
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;


      .myopia-rate-part {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .part-name {
          flex: 0 1 30px;
          color: #fff;
          font-size: 14px;
        }

        .part-progress {
          flex: 0 1 calc(100% - 40px);
        }
      }
    }

    .myopia-scale {
      display: flex;
      justify-content: space-between;
      height: 150px;

      .chart-progress {
        flex: 0 1 45%;
      	position: relative;
      	text-align: center;
        padding: 10px 0;
        box-sizing: border-box;

      	.circleCenter {
      		position: absolute;
      		top: 55px;
      		left: 50%;
      		transform: translate(-50%,0);
      		font-size: 14px;
          color: #fff;
      		text-align: center;
      	}
      }
    }
  }
</style>
